<template>
  <div class="login">
    <!-- 上面部分 -->
    <router-link to="/" class="top">
      <img class="logo" src="../../assets/images/ia_200000000.png" />
    </router-link>
    <!-- 中间部分 -->
    <!-- 左边图片 -->
    <div class="middle">
      <img class="img" src="../../assets/images/ia_200000001.jpg" />

      <!-- 右边表单 -->

      <div class="form">
        <div style="height: 40px; margin-bottom: 10px"></div>
        <div class="topform">
          <p>账号登录</p>
          <div class="topDynamic">
            <a class="Dynamic" href="">手机动态码登录</a>
            <img class="img-phone" src="../../assets/images/ia_200000004.png" />
          </div>
        </div>

        <!-- 输入手机号 -->
        <div class="topinput">
          <span class="country-area">
            <span class="plus">+</span>
            <span>86></span>
          </span>
          <input
            class="login-phone"
            type="text"
            placeholder="手机号"
            v-model="login.phone"
            @blur="phoneInp"
          />
          <div class="phonetip" v-show="flagReg.phoneflag">
            请输入正确手机号
          </div>
        </div>
        <!-- 输入密码 -->
        <div class="bottominput">
          <i class="icon-password"></i>
          <input
            class="login-password"
            type="text"
            placeholder="密码"
            v-model="login.password"
            @blur="PasswordInp"
          />
          <div class="passwordtip" v-show="flagReg.passwordflag">
            请输入正确的密码
          </div>
        </div>
        <div class="forgetpassword"><a href="">忘记密码？</a></div>

        <!-- 按钮 -->
        <button class="button" :class="{ orange: orange }" @click="tohome">
          登录
        </button>
        <p>还没有账号？<a @click="goRegister">免费注册</a></p>
        <!-- 协议 -->
        <div class="agreement">
          <div class="setcircular">
            <input
              class="circular"
              type="checkbox"
              v-model="flagReg.checked"
              @click="changechecked"
            />
          </div>

          <div>
            我已阅读并同意<a href="">《美团用户协议》</a>
            <a href="">《隐私政策》</a>
            ，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理
          </div>
        </div>
        <div class="cooperation">
          <div class="cooperation-line">
            <span class="cooperation-text">用合作网站账号登录</span>
            <div class="orther-login">
              <span class="qq"></span>
              <span class="weibo"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <div class="bottom">
      <ul class="nav">
        <li class="first-nav"><a>关于美团</a></li>
        <li><a>加入我们</a></li>
        <li><a>商家入驻</a></li>
        <li><a>帮助中心</a></li>
        <li class="last-nav"><a>美团手机版</a></li>
      </ul>
      <div>
        <span
          >©2022 美团网团购 meituan.com 京ICP证070791号
          京公网安备11010502025545号</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { loginApi } from "@/api/register";
export default defineComponent({
  name: "login",
});
</script>

<script setup>
import { ref, reactive } from "vue";
import router from "../../router";
import { message } from "ant-design-vue";

const goRegister = () => {
  router.push("/register");
};
const login = reactive({
  phone: "18025384021",
  password: "",
});

const orange = ref(false);

const PhoneReg = /^[1]([3-9])[0-9]{9}$/;
const PasswordReg = /^[a-z0-9]{6,16}$/;

const flagReg = reactive({
  phoneflag: false,
  passwordflag: false,
  checked: false,
});

// 校验手机号
const phoneInp = () => {
  if (!login.phone || !PhoneReg.test(login.phone)) {
    flagReg.phoneflag = true;
  } else {
    flagReg.phoneflag = false;
  }
};

// 校验密码
const PasswordInp = () => {
  if (!login.password || !PasswordReg.test(login.password)) {
    flagReg.passwordflag = true;
  } else {
    flagReg.passwordflag = false;
  }
};

// 校验完成之后 按钮变色
const fromReg = () => {
  if (!flagReg.phoneflag && !flagReg.passwordflag && !flagReg.checked) {
    orange.value = true;
  } else {
    orange.value = false;
  }
};
// 协议的复选框
const changechecked = () => {
  fromReg();
};

// 点击登录去首页
const tohome = async () => {
  if (orange.value === false) return;
  const res = await loginApi({ phone: login.phone, password: login.password });
  console.log(res);
  if (Array.isArray(res)) {
    localStorage.setItem("user", JSON.stringify(res[0]));
    message.success("登录成功，即将进入首页...", 0.5);
    router.push("/");
  } else {
    message.error("手机号或密码错误！");
    console.log(222);
  }
  // router.push("/")
};
</script>

<style scoped>
.phonetip,
.passwordtip {
  color: red;
}
.login {
  margin: 0 auto;
  width: 980px;
  height: 100%;
  /* background-color: coral; */
}
.top {
  margin-top: 40px;
  margin-bottom: 30px;
  width: 190px;
  height: 47px;
  /* background-color: cadetblue; */
}
.logo {
  /* margin: 0 auto; */
  width: 130px;
  height: 47px;
}
/* 中间 */
.middle {
  display: flex;
  width: 980px;
  height: 447px;
  margin-bottom: 70px;
  /* background-color: darkgreen; */
}
.middle .img {
  width: 480px;
  height: 370px;
  margin-right: 115px;
}
.img-phone {
  height: 14px;
  width: 14px;
}
.form {
  width: 270px;
  /* height: 280px; */
  font-size: 14px;
  color: #666666;
  background-color: rgb(255, 255, 255);
}
.topform {
  display: flex;
  justify-content: space-between;
}
.topDynamic {
  display: flex;
  align-items: center;
}

.topinput,
.bottominput {
  width: 270px;
  height: 40px;
  margin: 8px 0;
  /* padding: 3px; */
  box-sizing: border-box;
  border: 1px solid #aaa;
}
.bottominput {
  margin-top: 16px;
}
.login-phone,
.login-password {
  margin: 0px;
  width: 180px;
  height: 38px;
  padding: 5px;
  border: none;
  outline: none;
  box-sizing: border-box;
}
.login-password {
  margin-left: 10px;
}
/* 输入密码的图标 */
.icon-password {
  /* border: 1px solid; */
  display: inline-block;
  margin-left: 7px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background-position: -1249px -527px;
  background-image: url(../../assets/images/ia_200000009.png);
}
/* 忘记密码 */
.forgetpassword {
  float: right;
  padding-bottom: 8px;
  /* clear:both; */
}
/* 清除浮动 */
/* .forgetpassword::after {
  content: " ";
  height: 0;
  display: block;
  clear: both;
} */
.button {
  /* clear:both; */
  width: 270px;
  height: 34px;
  margin: 8px 0px;
  font-weight: bold;
  border: none;
  background-color: #b8b4b4;
  /* background-image: linear-gradient(135deg, #ffd000 0, #ffbd00 100%); */
}
/* 协议 */
.agreement {
  margin-top: 20px;
  width: 270px;
  height: 90px;
  display: flex;
  color: rgba(0, 0, 0, 0.5);
}
.setcircular {
  margin-right: 5px;
  display: block;
  width: 20px;
  height: 84px;
}
.circular {
  margin: 2px 5px;
  width: 15px;
  height: 15px;
  float: left;
  border-radius: 50%;
  flex-direction: column-reverse;
}

/* 合作网站 */
.cooperation {
  margin-top: 10px;
  /* display: flex; */
}
.cooperation .cooperation-line {
  width: 270px;
  height: 50px;
  /* background-color: blueviolet; */
  border-top: 1px solid #666666 !important;
}
.cooperation .cooperation-text {
  position: relative;
  width: 150x;
  height: 21px;
  padding: 0 10px;
  left: 65px;
  top: -10px;
  background: rgb(255, 255, 255);
}
.orther-login {
  /* justify-content:space-around; */
  justify-content: center;
  display: flex;
  height: 18px;
  width: 100%;
  /* border: 1px solid blue; */
}
.orther-login .qq {
  width: 18px;
  height: 18px;
  margin-right: 20px;
  /* border: 1px solid black; */
  background-position: -1250px -491px;
  background-image: url(../../assets/images/ia_200000009.png);
}
.orther-login .weibo {
  width: 18px;
  height: 18px;
  /* border: 1px solid black; */
  background-position: -1250px -599px;
  background-image: url(../../assets/images/ia_200000009.png);
}
.bottom .nav {
  /* align-content:center; */
  text-align: center;
  align-items: center;
  height: 50px;
  margin-bottom: 20px;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  list-style: none;
  display: flex;
  font-size: 12px;
}
.bottom {
  font-size: 12px;
  color: #999999;
}
.bottom .nav li {
  padding: 0px 16px;
}
.bottom .nav li a {
  color: #999999;
}
.bottom .nav .first-nav {
  padding-left: 0px;
}
.bottom .nav .last-nav {
  border: none;
}
a {
  color: #fe8c00;
  text-decoration: none;
}

.orange {
  background-image: linear-gradient(135deg, #ffd000 0, #ffbd00 100%);
}
</style>
